<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>WELCOME</title>

    <!--Bootstrap CSS-->
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <!--消息提示组件 CSS-->
    <link rel="stylesheet" href="../lib/spop-gh-pages/dist/spop.css">
    <!--自定义 CSS-->
    <link type="text/css" rel="styleSheet" href="../css/welcome.css"/>
</head>

<body>
<!-- 顶部半透明容器 -->
<div class="navbar navbar-fixed-top ">
    <div class="col-xs-1 aTopAndBottom ">
        <a id="tucao-home"><span class="glyphicon glyphicon-home"></span></a>
    </div>
    <!--登录按钮-->
    <div class="col-xs-1 col-xs-offset-9 aTopAndBottom">
        <a href="" data-toggle="modal" data-target="#login">
            <span class="glyphicon glyphicon-log-in"></span>
            <span id="loginText">登录</span>
        </a>
    </div>
    <!--注册按钮-->
    <div class="col-xs-1 aTopAndBottom">
        <a href="" data-toggle="modal" data-target="#register">
            <span class="glyphicon glyphicon-user"></span>
            <span id="registerText">注册</span>
        </a>
    </div>
</div>

<!-- 中部容器 -->
<div class="container">
    <div class="main">
        <h1 class="title">life always happy</h1>
    </div>
</div>

<!-- 外部网易云音乐 插件-->
<iframe class="netease_Player" frameborder="no" border="0" marginwidth="0" marginheight="0"
        width=330 height=300 src="//music.163.com/outchain/player?type=0&id=606650925&auto=0&height=430">
</iframe>

<!-- 底部半透明容器：四选项 -->
<div class="navbar navbar-fixed-bottom">
    <!-- 学习分类 -->
    <div class="col-xs-3 aTopAndBottom bottomSelect">
        <a id="study">
            <span class="glyphicon glyphicon-education"></span>
        </a>
    </div>
    <!-- 学习分类 end -->

    <!-- 视频分类  -->
    <div class="col-xs-3 aTopAndBottom">
        <a id="video">
            <span class="glyphicon glyphicon-film"></span>
        </a>
    </div>
    <!-- 视频分类 end -->

    <!-- 音乐分类 -->
    <div class="col-xs-3 aTopAndBottom bottomSelect">
        <li class="dropup">

            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">
                <span class="glyphicon glyphicon-music"></span>
            </a>
            <ul class="dropdown-menu dropdownSelect">
                <li>
                    <a href="javascript:void(0);" onclick="openMyMusic()"><b>本地播放</b></a>
                </li>
                <li>
                    <a href="http://music.163.com/playlist?id=606650925&userid=424310419"
                       target="_blank"><b>我喜欢的</b></a>
                </li>
                <li>
                    <a href="javascript:void(0);" target="_blank"><b>精选歌曲</b></a>
                </li>
            </ul>
        </li>
    </div>
    <!-- 音乐分类 end -->

    <!-- 更多分类  -->
    <div class="col-xs-3 aTopAndBottom bottomSelect">
        <div class="dropup">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">
                更多
            </a>
            <ul class="dropdown-menu dropdownSelect dropdown-menu-right">
                <li>
                    <a href="javascript:void(0);">联系我</a>
                </li>
                <li>
                    <a href="javascript:void(0);">收藏</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 更多分类 end -->
</div>
<!-- 底部半透明容器：四选项 end -->

<!-- 注册 -->
<!--model:模态框 ; fade:动态出现模态框-->
<div id="register" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <!--不加这行 注册模态框的叉叉按钮不会出现-->
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">注册</h1>
            </div>
            <div class="modal-body">
                <!--<form class="form-group" action="">-->
                <form id="registerForm" class="form-group">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <font class="control-label" id="usernameMsg" style="color: red;font-size: 13px;"></font>
                        <input class="form-control" type="text" id="username" maxlength="15" placeholder="6-15位字母或数字">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <font class="control-label" id="passwordMsg" style="color: red;font-size: 13px;"></font>
                        <input class="form-control" type="password" id="password" placeholder="至少6位字母或数字">
                    </div>
                    <div class="form-group">
                        <label for="repassword">确认密码</label>
                        <font class="control-label" id="repasswordMsg" style="color: red;font-size: 13px;"></font>
                        <input class="form-control" type="password" id="repassword" placeholder="至少6位字母或数字">
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <font class="control-label" id="emailMsg" style="color: red;font-size: 13px;"></font>
                        <input class="form-control" type="email" id="email" placeholder="例如:***@***.com">
                    </div>
                    <br>
                    <div class="form-group">
                        <button id="registerBtn" class="btn btn-primary btn-block modal-content" type="submit"
                                style="background-color: rgba(175,210,255,0.4);border: 0px solid transparent;">提交
                        </button>
                    </div>
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">
                        <font style="font-size: 13px;">已有账号？点我登录</font>
                    </a>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 注册 end-->

<!-- 登录 -->
<div id="login" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">登录</h1>
            </div>
            <div class="modal-body">
                <form id="loginForm" class="form-group">
                    <div class="form-group">
                        <label for="login-username">用户名</label>
                        <input class="form-control" type="text" id="login-username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="login-password">密码</label>
                        <input class="form-control" type="password" id="login-password" placeholder="请输入密码">
                    </div>
                    <br>
                    <div class="form-group">
                        <button id="loginBtn" class="btn btn-primary btn-block modal-content" type="submit"
                                style="background-color: #afd2ff66;border: 0px solid transparent;">登录
                        </button>
                    </div>
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">
                        <font style="font-size: 13px;">还没有账号？点我注册</font>
                    </a>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 登录 end -->

<script type="text/javascript" src="../lib/js/jquery-1.11.0.min.js"></script>
<!--BootStrap JS-->
<script src="../lib/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<!--消息提示组件 JS-->
<script src="../lib/spop-gh-pages/dist/spop.js"></script>
<!--导入JS-->
<script src="../js/welcome.js"></script>
</body>

</html>
